<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
//引入iconback组件
import iconBack from '@/components/icon-backto/index.vue'
//引入upload组件 上传图片视频组件
import Upload from '@/components/upload/index.vue'
// 上传图片视频组件请求头
import getheader from '@/apis/img-header'
//引入api 发送请求发布商品
import {
    doReleaseGood,
    doGetPlatformCategory,
    doGetCategory,
    doUpdateCommodity,
    doGetSingleCommodity,
    doGetCommoditySku,
    getIntraCityInfo,
} from '@/apis/good'
//doReleaseGood发布商品
//doGetPlatformCategory获取平台类目
// doGetCategory获取店铺分类
import { doGetLogisticsTemplateList } from '@/apis/freight/freight-template'
import { onLoad, onReady } from '@dcloudio/uni-app'
//获取type类型
import { FormDataTypes } from '../type'
//doGetLogisticsTemplateList获取物流模板列表
import { useSkusList } from '@/store/modules/skus/index'

const store = useSkusList()
//图片上传地址
const action = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_UPLOAD_URL
//表单数据
enum DISTRIBUTION {
    MERCHANT = '',
    EXPRESS = '快递配送', //快递配送
    INTRA_CITY_DISTRIBUTION = '同城配送', //同城配送
    SHOP_STORE = '到店自提', //到店自提
    VIRTUAL = '无需物流', //无需物流
}

const formData = ref<FormDataTypes>({
    productType: 'REAL_PRODUCT', //商品类型
    id: '', //商品id
    shopId: '', //店铺id
    name: '', //商品名称
    saleDescribe: '', //商品描述
    albumPics: [] || '', //图片数据 发送的时候需要转换成字符串 以逗号分隔
    imglist: [], //图片数据,
    //平台类目id 没有的时候发送 null
    platformCategory: {
        one: '',
        two: '',
        three: '',
    },
    platformCategoryId: '', //平台类目第三级的id 没有的时候发送 空
    //店铺分类id
    shopCategory: {
        one: '',
        two: '',
        three: '',
    },
    categoryId: '', //店铺分类第三级的id 没有的时候发送 空
    skus: [
        //必填 不添加sku时候  传递初始化的模板 模板里面只需要填写 price salePrice
        {
            initSalesVolume: 0, // 必填 初始销量 不添加sku时候为0
            limitType: 'UNLIMITED' || 'PRODUCT_LIMITED' || 'SKU_LIMITED', //必填 限购类型 不添加sku时候为UNLIMITED
            limitNum: 0, //必填 限购数量 不添加sku时候为0
            image: '', //必填 上传sku图片 不添加sku时候为商品主图数据
            price: 1, //必填 指导价
            salePrice: 1, //必填 实售价
            specs: [], //非必填 规格值
            id: '', //非必填 skuId 不添加sku时候为空
            stockType: 'UNLIMITED', //必填 库存类型  不添加sku时候为UNLIMITED
            initStock: 0, //必填 初始库存 新增sku时候可用 默认0
            weight: 0, //非必填 重量
        },
    ],
    specGroups: [], //必填 规格组 不添加sku时候为空
    freightTemplateId: '0', //物流模板id
    detail: '<p><br></p>', //商品详情 富文本数据
    attributeId: '', //商品属性id 可以为空
    // distributionMode: 'EXPRESS', //配送方式 1快递 写死的
    distributionMode: ['EXPRESS'], //配送方式 1快递 写死的
    status: 'SELL_ON',
    videoUrl: '',
    serviceIds: [],
    price: 1, //必填 指导价
    salePrice: 1, //必填 实售价
    initSalesVolume: 0, // 必填 初始销量 不添加sku时候为0
    weight: 0, //非必填 重量
    stockType: 'LIMITED', //必填 库存类型
    initStock: 0, //必填 初始库存 新增sku时候可用 默认0
    limitType: 'UNLIMITED', //必填 限购类型
    limitNum: 0, //必填 限购数量 不添加sku时候为0
    productParameters: [],
    productAttributes: [],

    openSpecs: false, //多规格选择开关
    shopText: '',
    platformText: '',
    freightText: '',
    distributionModeList: [
        {
            label: DISTRIBUTION.EXPRESS,
            value: 'EXPRESS',
            checked: false,
        },
        {
            label: DISTRIBUTION.INTRA_CITY_DISTRIBUTION,
            value: 'INTRA_CITY_DISTRIBUTION',
            checked: false,
        },
        {
            label: DISTRIBUTION.SHOP_STORE,
            value: 'SHOP_STORE',
            checked: false,
        },
    ],
})
const stockTypeData = ref([
    {
        value: 'UNLIMITED',
        text: '不限制库存',
    },
    {
        value: 'LIMITED',
        text: '限制库存',
    },
])
const limitTypeData = ref([
    {
        value: 'UNLIMITED',
        text: '不限购',
    },
    {
        value: 'PRODUCT_LIMITED',
        text: '商品限购',
    },
])

//平台类目和店铺分类 发送请求所需数据
const Page = reactive({
    current: 1,
    size: 500,
})
//商品类型选择标识
const showSelect = ref(false)
//商品类型选择列表
const selectList = [
    {
        value: 'REAL_PRODUCT',
        label: '实物商品（快递/同城/自提）',
    },
    {
        value: 'VIRTUAL_PRODUCT',
        label: '虚拟商品（无需物流）',
    },
]
//lable标签样式
const labelStyle = reactive({
    'font-size': '24rpx',
})
//平台类目数据
const platformCategoryData = ref([])
//店铺分类数据
const shopCategory = ref([])
//物流模板数据
const logisticsTemplateList = ref<
    {
        text: string
        value: string
    }[]
>([])

//表单验证
const rules = reactive({
    name: [
        {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur',
        },
    ],
    saleDescribe: [
        {
            required: true,
            message: '请输入商品描述',
            trigger: 'blur',
        },
    ],
    albumPics: [
        {
            required: true,
            message: '请上传商品图片',
            trigger: 'blur',
        },
    ],

    price: [
        {
            required: true,
            message: '请输入指导价',
            trigger: 'blur',
        },
    ],
    salePrice: [
        {
            required: true,
            message: '请输入实售价',
            trigger: 'blur',
        },
    ],
})
//form表单实例
const shopForm = ref()
const disabled = ref(true)

onLoad(async (res: any) => {
    uni.$emit('updateTitle')
    formData.value = store.SkusList.list
    //编辑回显数据
    if (res.shopid && res.id) {
        formData.value.id = res.id
        formData.value.shopId = res.shopid
        await handleGetGoodsDetail(res.id, res.shopid)
        await handleGetSkusDetail(res.id, res.shopid)
        formData.value.price = formData.value.skus[0].price
        formData.value.salePrice = formData.value.skus[0].salePrice
        formData.value.initSalesVolume = formData.value.skus[0].initSalesVolume
        formData.value.weight = formData.value.skus[0].weight
        formData.value.stockType = formData.value.skus[0].stockType
        formData.value.initStock = formData.value.skus[0].initStock
        formData.value.limitType = formData.value.skus[0].limitType
        formData.value.limitNum = formData.value.skus[0].limitNum
        if (formData.value.productType === 'VIRTUAL_PRODUCT') {
            formData.value.distributionMode = ['VIRTUAL']
        }
    }

    if (res.id === '1') {
        const data = store.SkusList.list
        const spec = store.SkusList.specGroupList
        //判断是否有数据
        if (data) {
            formData.value = data
            formData.value.specGroups = spec
        }
    } else {
        store.SkusList.list = formData.value
    }
    //页面加载的时候获取平台类目数据
    handleGetPlatformCategory()
    //获取店铺分类数据
    handleGetShopCategory()
    //获取物流模板数据
    handleGetTemplateList()
    getIntraCityInfo().then((res) => {
        if (res.data) {
            disabled.value = !res.data.enableSelf && !res.data.enableOpen
        }
    })
})
onReady(() => {
    shopForm.value.setRules(rules)
})
//页面数据持久化

//获得商品sku数据
const handleGetSkusDetail = async (id: string, shopId: string) => {
    const res = await doGetCommoditySku(shopId, id)
    if (res.code === 200) {
        if (res.data.specGroups.length) {
            formData.value.openSpecs = true
            store.SkusList.specGroupList = res.data.specGroups
        } else {
            formData.value.openSpecs = false
        }
        if (res.data.skus.length) {
            res.data.skus.forEach((item: any) => {
                item.price = (item.price / 10000).toFixed(2)
                item.salePrice = (item.salePrice / 10000).toFixed(2)
            })
            store.SkusList.skus = res.data.skus
            formData.value.skus = res.data.skus
        }
    }
}
//获得单个商品数据
const handleGetGoodsDetail = async (id: string, shopId: string) => {
    const res = await doGetSingleCommodity(id, shopId)
    console.log(res)
    if (res.code === 200) {
        formData.value = res.data
        formData.value.imglist = []
        //字符串拆分成数组 split() 方法用于把一个字符串分割成字符串数组。
        ;(formData.value.albumPics as string).split(',').forEach((item: any) => {
            // formData.value.imglist.push(item)
            if (item) {
                formData.value.imglist.push(item)
            }
        })
        console.log(formData.value.imglist)

        formData.value.videoUrl = res.data.videoUrl
        formData.value.categoryId = res.data.categoryId
        formData.value.platformCategoryId = res.data.platformCategoryId
        formData.value.distributionModeList = [
            {
                label: DISTRIBUTION.EXPRESS,
                value: 'EXPRESS',
                checked: formData.value.distributionMode.includes('EXPRESS'),
            },
            {
                label: DISTRIBUTION.INTRA_CITY_DISTRIBUTION,
                value: 'INTRA_CITY_DISTRIBUTION',
                checked: formData.value.distributionMode.includes('INTRA_CITY_DISTRIBUTION'),
            },
            {
                label: DISTRIBUTION.SHOP_STORE,
                value: 'SHOP_STORE',
                checked: formData.value.distributionMode.includes('SHOP_STORE'),
            },
        ]
        formData.value.productAttributes = res.data.extra.productAttributes
        formData.value.productParameters = res.data.extra.productParameters
        console.log('formData.value.distributionModeList', formData.value.distributionModeList)
        store.SkusList.context = formData.value.detail
    }
}
/**
 * 三个picker选择器 平台类目的点击事件 店铺分类点击事件  物流模板点击事件
 */

//平台类目点击事件
const handleClickPlat = (e: any) => {
    console.log(e)
    //点击的时候判断点击的是哪一级 并且把点击的数据存储到platformCategory里面
    if (e.level === 'LEVEL_1') {
        formData.value.platformCategory.one = e.value
        formData.value.platformCategory.two = ''
        formData.value.platformCategory.three = ''
    } else if (e.level === 'LEVEL_2') {
        formData.value.platformCategory.two = e.value
        formData.value.platformCategory.three = ''
    } else if (e.level === 'LEVEL_3') {
        formData.value.platformCategory.three = e.value
    }
}
//店铺分类点击事件
const handleClickShop = (e: any) => {
    console.log(e)
    //点击的时候判断点击的是哪一级 并且把点击的数据存储到platformCategory里面
    if (e.level === 'LEVEL_1') {
        formData.value.shopCategory.one = e.value
        formData.value.shopCategory.two = ''
        formData.value.shopCategory.three = ''
    } else if (e.level === 'LEVEL_2') {
        formData.value.shopCategory.two = e.value
        formData.value.shopCategory.three = ''
    } else if (e.level === 'LEVEL_3') {
        formData.value.shopCategory.three = e.value
    }
}
//物流模板点击事件
const handleClickLogistics = (e: any) => {
    console.log(e)
    formData.value.freightTemplateId = e.value
}
/**
 * 发送请求获取平台类目数据 获取店铺分类数据 获取物流模板数据
 */
//获取平台类目数据
const handleGetPlatformCategory = async () => {
    const { data } = await doGetPlatformCategory(Page)
    console.log('----data', data)

    //把arr转换成platformCategoryData使用的数据格式 每一级都只有text value children 三个字段 用递归
    let arr = data.map((item: any) => {
        return {
            text: item.name,
            value: item.categoryId || item.id,
            level: item.level,
            children: item.secondCategoryVos.map((item: any) => {
                return {
                    text: item.name,
                    value: item.id,
                    level: item.level,
                    children: item.categoryThirdlyVos.map((item: any) => {
                        return {
                            text: item.name,
                            value: item.id,
                            level: item.level,
                        }
                    }),
                }
            }),
        }
    })
    platformCategoryData.value = arr
    if (formData.value.platformCategoryId) {
        platformCategoryData.value.forEach((item: any) => {
            item.children.forEach((item2: any) => {
                item2.children.forEach((item3: any) => {
                    if (item3.value === formData.value.platformCategoryId) {
                        formData.value.platformText = item.text + '/' + item2.text + '/' + item3.text
                        console.log('安徽省即可打开的', item)
                        formData.value.platformCategory = {
                            one: item.value,
                            two: item2.value,
                            three: item3.value,
                        }
                    }
                })
            })
        })
    }
}
//获取店铺分类数据
const handleGetShopCategory = async () => {
    const { data } = await doGetCategory(Page)
    // console.log(data.records)
    //第三级children可能没有这个字段 所以需要判断一下 如果没有就给一个空数组 用递归实现
    shopCategory.value = handleArr(data.records)

    if (formData.value.categoryId) {
        // 循环遍历找出shopCategory.value中value值等于res.data.categoryId值的label值
        shopCategory.value.forEach((item: any) => {
            item.children.forEach((item2: any) => {
                item2.children.forEach((item3: any) => {
                    if (item3.value === formData.value.categoryId) {
                        formData.value.shopText = item.text + '/' + item2.text + '/' + item3.text
                        formData.value.shopCategory = {
                            one: item.value,
                            two: item2.value,
                            three: item3.value,
                        }
                    }
                })
            })
        })
    }
}
//获取物流模板数据
const handleGetTemplateList = async () => {
    const { data } = await doGetLogisticsTemplateList(Page.current, Page.size)
    logisticsTemplateList.value = data.records.map((item: any) => {
        return {
            text: item.templateName,
            value: item.id,
        }
    })
    logisticsTemplateList.value.unshift({
        text: '商家包邮',
        value: '0',
    })
    // formData.freightText
    logisticsTemplateList.value.forEach((item: any) => {
        if (item.value === formData.value.freightTemplateId) {
            formData.value.freightText = item.text
        }
    })
}
//提交发布商品请求
const handleSubmitShop = async () => {
    const data = await doReleaseGood(formData.value)
    if (data.code === 200) {
        //初始化store里面的数据
        let a = JSON.parse(localStorage.getItem('skustate') || '{}')
        store.SkusList = a.SkusList
        uni.navigateTo({
            url: '/basePackage/pages/shopsSystemone/index',
        })
    }
}

//递归函数 把arr转换成shopCategory使用的数据格式 每一级都只有text value children 三个字段
const handleArr = (arr: any) => {
    let a: any = []
    arr.forEach((item: any) => {
        if (item.id && item.name && item.children && item.level) {
            a.push({
                text: item.name,
                value: item.id,
                level: item.level,
                children: handleArr(item.children),
            })
        } else if (item.id && item.name && !item.children && item.level) {
            a.push({
                text: item.name,
                value: item.id,
                level: item.level,
                children: [],
            })
        }
    })
    return a
}
/**
 * 点击提交发布商品回调
 */
const handleSubmit = async () => {
    //1.判断formData.value.openSpecs多规格开关 是否开
    if (formData.value.openSpecs) {
        //判断store.SkusList.specGroupList 是否有值
        if (store.SkusList.specGroupList.length === 0) {
            uni.showToast({
                title: '请添加规格',
                icon: 'none',
            })
            return
        }
        //判断store.SkusList.skus 是否有值
        if (store.SkusList.skus.length === 0) {
            uni.showToast({
                title: '请添加规格',
                icon: 'none',
            })
            return
        }
        formData.value.specGroups = store.SkusList.specGroupList
        formData.value.skus = store.SkusList.skus
        formData.value.skus.forEach((item: any) => {
            if (item.price <= 0) {
                uni.showToast({
                    title: '价格必须大于0',
                    icon: 'none',
                })
                return
            }
            if (item.salePrice <= 0) {
                uni.showToast({
                    title: '售价必须大于0',
                    icon: 'none',
                })
                return
            }
            if (item.salePrice > item.price) {
                uni.showToast({
                    title: '实售价不能大于指导价',
                    icon: 'none',
                })
                return
            }
            //价格都乘以10000
            item.price = item.price * 10000
            item.salePrice = item.salePrice * 10000
        })
    } else {
        //判断多规格关闭的时候是否正确填写了价格
        if (!formData.value.price) {
            uni.showToast({
                title: '请填写价格',
                icon: 'none',
            })
            return
        }
        if (!formData.value.salePrice) {
            uni.showToast({
                title: '请填写售价',
                icon: 'none',
            })
            return
        }
        //转为数字判断价格是否正确
        if (Number(formData.value.price) <= 0) {
            uni.showToast({
                title: '价格必须大于0',
                icon: 'none',
            })
            return
        }
        if (Number(formData.value.salePrice) <= 0) {
            uni.showToast({
                title: '售价必须大于0',
                icon: 'none',
            })
            return
        }
        if (Number(formData.value.salePrice) > Number(formData.value.price)) {
            uni.showToast({
                title: '实售价不能大于指导价',
                icon: 'none',
            })
            return
        }

        formData.value.skus[0].price = formData.value.price * 10000
        formData.value.skus[0].salePrice = formData.value.salePrice * 10000
        formData.value.skus[0].initSalesVolume = formData.value.initSalesVolume
        formData.value.skus[0].weight = formData.value.weight
        console.log('formData.value.stockType', formData.value.stockType)
        formData.value.skus[0].stockType = formData.value.stockType
        formData.value.skus[0].initStock = formData.value.initStock
        formData.value.skus[0].limitType = formData.value.limitType
        formData.value.skus[0].limitNum = formData.value.limitNum
    }

    //2.判断formData.value.shopCategory 三级店铺分类是否都有值
    if (!formData.value.categoryId) {
        if (formData.value.shopCategory.one && formData.value.shopCategory.two && formData.value.shopCategory.three) {
            formData.value.categoryId = formData.value.shopCategory.three
        } else {
            uni.showToast({
                title: '请选择店铺分类',
                icon: 'none',
            })
            return
        }
    }
    if (!formData.value.distributionMode.length) {
        uni.showToast({
            title: '请至少选择一个配送方式',
            icon: 'none',
        })
        return
    }

    //判断formData.value.platformCategory 平台类目是否都有值
    if (formData.value.platformCategory.one && formData.value.platformCategory.two && formData.value.platformCategory.three) {
        formData.value.platformCategoryId = formData.value.platformCategory.three
    } else {
        uni.showToast({
            title: '请选择三级平台类目',
            icon: 'none',
        })
        return
    }
    //3.处理图片数据
    // 判断formData.value.albumPics是否是数组 并且长度是否大于0 把数组里面的数据拼接成字符串
    if (Array.isArray(formData.value.imglist) && formData.value.imglist.length) {
        let str = ''
        formData.value.imglist.forEach((item: any, index: number) => {
            str += item + ','
            //处理店铺初始化skus数据
            if (index === 0 && !formData.value.openSpecs) {
                console.log('item1111111111111111111111111111111', item)
                formData.value.skus[0].image = item
            }
        })
        //截取最后一个逗号
        str = str.substring(0, str.length - 1)
        formData.value.albumPics = str
    }
    console.log(formData.value.albumPics)
    //再判断formData.value.albumPics是否是字符串 并且长度是否大于0
    if (typeof formData.value.albumPics === 'string' && formData.value.albumPics.length) {
        //处理店铺初始化skus数据
        // formData.value.skus[0].image = formData.value.albumPics
    } else {
        uni.showToast({
            title: '请上传商品图片',
            icon: 'none',
        })
        return
    }
    //处理video数据
    // console.log(formData.value.videoUrl)
    // if (formData.value.videoUrl) {
    //     formData.value.videoUrl = formData.value.videoUrl[0]
    // }
    //处理富文本数据
    formData.value.detail = store.SkusList.context
    console.log(formData.value)
    formData.value.sellType = 'OWN'
    // formData.value.productType = 'REAL_PRODUCT'
    //4.判断是编辑还是新增
    if (formData.value.id) {
        //编辑
        handleEditShop()
    } else {
        //新增
        handleSubmitShop()
    }
}
/**
 * 编辑商品回调
 */
const handleEditShop = async () => {
    const res = await doUpdateCommodity(formData.value)
    if (res.code === 200) {
        uni.showToast({
            title: '编辑成功',
            icon: 'none',
        })
        let a = JSON.parse(localStorage.getItem('skustate') || '{}')
        store.SkusList = a.SkusList
        setTimeout(() => {
            uni.navigateTo({
                url: '/basePackage/pages/shopsSystemone/index',
            })
        }, 1000)
    } else if (res.code === 60003) {
        uni.showToast({
            title: res.msg,
            icon: 'none',
        })
        uni.navigateTo({
            url: '/basePackage/pages/shopsSystemone/index',
        })
    }
}
/**
 * 跳转到添加商品规格页面和商品明细页面
 */
const handleGoToSpec = () => {
    store.SkusList.list = formData.value
    //跳转到addShopSpec
    uni.navigateTo({
        url: `/basePackage/pages/shopsSystemone/components/AddShopSpec?shopid=${formData.value.shopId}&id=${formData.value.id}`,
    })
}
const handleGoToDetail = () => {
    store.SkusList.list = formData.value
    uni.navigateTo({
        url: `/basePackage/pages/shopsSystemone/components/AddShopDetail?shopid=${formData.value.shopId}&id=${formData.value.id}`,
    })
}
/**
 * 跳转到商品详情富文本页面
 */
const handleGoToRichText = () => {
    store.SkusList.list = formData.value
    uni.navigateTo({
        url: '/basePackage/pages/shopsSystemone/components/richText',
    })
}
/**
 * 快递多选框回调 暂时没有上线功能
 */
const checkboxChange = (e: any) => {
    if (e.value) {
        formData.value.distributionMode.push(e.name)
    } else {
        formData.value.distributionMode = formData.value.distributionMode.filter((item: any) => item !== e.name)
    }
    formData.value.distributionModeList.forEach((item: any) => {
        console.log(item)
        if (item.value === e.name) {
            item.checked = !item.checked
        }
    })
}
/**
 * 多选数据回调
 */
const handleChaneSelecplatform = (e: any) => {
    console.log(e)
    let str = ''
    e.detail.value.forEach((item: any) => {
        str += item.text + '/'
    })
    formData.value.platformText = str
}
const handleChaneSelecShop = (e: any) => {
    console.log(e)
    let str = ''
    e.detail.value.forEach((item: any) => {
        str += item.text + '/'
    })
    formData.value.shopText = str
}
const handleChanefreight = (e: any) => {
    console.log(e.detail.value[0].text)
    formData.value.freightText = e.detail.value[0].text
}
//图片选择回调
const handleSuccess = (e: any) => {
    formData.value.imglist = [...formData.value.imglist, e[e.length - 1]]
}
const handleDelete = (e: any) => {
    console.log(e)
    formData.value.imglist = formData.value.imglist.filter((item: any) => item !== e.del)
}
//初始化store
const handleClearStore = () => {
    let a = JSON.parse(localStorage.getItem('skustate') || '{}')
    store.SkusList = a.SkusList
}
const handleSuccessVideo = (e: any) => {
    formData.value.videoUrl = e
    console.log(e, formData.value.videoUrl)
}
const handleDeleteVideo = (e: any) => {
    console.log(e)
    formData.value.videoUrl = ''
}
const selectConfirm = (e: any) => {
    formData.value.productType = e[0].value
    if (e[0].value === 'VIRTUAL_PRODUCT') {
        formData.value.distributionMode = ['VIRTUAL']
    } else {
        formData.value.distributionMode = ['EXPRESS']
        formData.value.distributionModeList = [
            {
                label: DISTRIBUTION.EXPRESS,
                value: 'EXPRESS',
                checked: formData.value.distributionMode.includes('EXPRESS'),
            },
            {
                label: DISTRIBUTION.INTRA_CITY_DISTRIBUTION,
                value: 'INTRA_CITY_DISTRIBUTION',
                checked: formData.value.distributionMode.includes('INTRA_CITY_DISTRIBUTION'),
            },
            {
                label: DISTRIBUTION.SHOP_STORE,
                value: 'SHOP_STORE',
                checked: formData.value.distributionMode.includes('SHOP_STORE'),
            },
        ]
    }
}
</script>

<template>
    <view class="content">
        <view class="content__header">
            <icon-back style="margin-right: 30rpx" :type="1" :url="'/basePackage/pages/shopsSystemone/index'" @clear="handleClearStore"></icon-back>
        </view>
        <view class="content__main">
            <scroll-view class="content__main--form" :scroll-y="true">
                <u-form ref="shopForm" :model="formData" label-position="top" :border-bottom="false">
                    <u-form-item label="商品类型" :border-bottom="false" :label-style="labelStyle">
                        <view class="formitem__detail" style="line-height: 60rpx" @click="showSelect = true">
                            {{ formData.productType === 'VIRTUAL_PRODUCT' ? '虚拟商品' : '实物商品' }}
                            <u-select v-if="!formData.id" v-model="showSelect" :list="selectList" @confirm="selectConfirm"></u-select>
                        </view>
                    </u-form-item>
                    <u-form-item prop="name" label="商品名称" :required="true" :border-bottom="false" :label-style="labelStyle">
                        <view class="formitem__detail">
                            <u-input
                                v-model="formData.name"
                                class="formitem__detail--text"
                                type="text"
                                placeholder="长度不超过35个字符"
                                maxlength="35"
                            />
                        </view>
                    </u-form-item>
                    <u-form-item prop="saleDescribe" label="商品描述" :border-bottom="false" :label-style="labelStyle">
                        <view class="formitem__detail">
                            <u-input
                                v-model="formData.saleDescribe"
                                class="formitem__detail--text"
                                type="text"
                                placeholder="长度不超过13个字符"
                                maxlength="13"
                            />
                        </view>
                    </u-form-item>
                    <u-form-item prop="albumPics" label="商品图片" :required="true" :border-bottom="false" :label-style="labelStyle">
                        <view class="formitem__img">
                            <Upload
                                v-model="formData.albumPics"
                                :action="action"
                                :imglist="formData.imglist"
                                :typeimg="true"
                                :choosetype="'img'"
                                :headers="getheader()"
                                @uploadSuccess="handleSuccess"
                                @imgDelete="handleDelete"
                            >
                            </Upload>
                            <view class="formitem__span">建议尺寸750*750像素，最多上传6张，首图为封面图。</view>
                        </view>
                    </u-form-item>
                    <u-form-item prop="albumPics" label="商品视频" :border-bottom="false" :label-style="labelStyle">
                        <view class="formitem__img">
                            <Upload
                                v-model="formData.videoUrl"
                                :action="action"
                                :videolist="formData.videoUrl"
                                :choosetype="'video'"
                                :typeimg="true"
                                :maxleng="1"
                                :headers="getheader()"
                                @uploadSuccess="handleSuccessVideo"
                                @imgDelete="handleDeleteVideo"
                            >
                            </Upload>
                        </view>
                    </u-form-item>

                    <u-form-item prop="albumPics" :required="true" label="平台类目" :border-bottom="false" :label-style="labelStyle">
                        <view class="formitem__selec">
                            <uni-data-picker
                                v-if="!formData.id"
                                :localdata="platformCategoryData"
                                popup-title="平台类目"
                                @nodeclick="handleClickPlat"
                                @change="handleChaneSelecplatform"
                            >
                                <template #default>
                                    <!-- +shopCategory -->

                                    <template v-if="formData.platformText"> {{ formData.platformText }}</template>
                                    <template v-else> 选择平台类目 </template>
                                </template>
                            </uni-data-picker>
                            <view v-else>{{ formData.platformText }}</view>
                        </view>
                    </u-form-item>
                    <u-form-item label="店铺分类" :required="true" :border-bottom="false" :label-style="labelStyle">
                        <view class="formitem__selec">
                            <uni-data-picker
                                :localdata="shopCategory"
                                popup-title="店铺分类"
                                @nodeclick="handleClickShop"
                                @change="handleChaneSelecShop"
                            >
                                <template #default>
                                    <!-- +shopCategory -->

                                    <template v-if="formData.shopText"> {{ formData.shopText }}</template>
                                    <template v-else>
                                        {{ '选择店铺分类' }}
                                    </template>
                                </template>
                            </uni-data-picker>
                        </view>
                    </u-form-item>
                    <view class="itemone">
                        <view class="formitem__title"
                            >多规格
                            <view>
                                <u-switch
                                    v-model="formData.openSpecs"
                                    :disabled="formData.id"
                                    active-color="#4755E9"
                                    inactive-color="#eee"
                                ></u-switch>
                            </view>
                        </view>
                    </view>
                    <!-- 不是多规格 -->
                    <template v-if="!formData.openSpecs">
                        <u-form-item label="指导价" :required="true" :border-bottom="false" :label-style="labelStyle">
                            <view class="formitem__detail">
                                <u-input
                                    v-model="formData.price"
                                    class="formitem__detail--text"
                                    type="text"
                                    placeholder="长度不超过30个字符"
                                    maxlength="30"
                                />
                            </view>
                        </u-form-item>
                        <u-form-item label="实售价" :required="true" :border-bottom="false" :label-style="labelStyle">
                            <view class="formitem__detail">
                                <u-input
                                    v-model="formData.salePrice"
                                    class="formitem__detail--text"
                                    type="text"
                                    placeholder="长度不超过30个字符"
                                    maxlength="30"
                                />
                            </view>
                        </u-form-item>
                        <u-form-item label="初始销量" :border-bottom="false" :label-style="labelStyle">
                            <view class="formitem__detail">
                                <u-input v-model="formData.initSalesVolume" class="formitem__detail--text" type="text" placeholder="不填默认0" />
                            </view>
                        </u-form-item>
                        <u-form-item label="重量" :border-bottom="false" :label-style="labelStyle">
                            <view class="formitem__detail">
                                <u-input v-model="formData.weight" class="formitem__detail--text" type="text" />
                            </view>
                        </u-form-item>
                        <u-form-item label="限购类型" :border-bottom="false" :label-style="labelStyle">
                            <view class="formitem__detail">
                                <uni-data-picker
                                    v-model="formData.limitType"
                                    :localdata="limitTypeData"
                                    popup-title="限购类型"
                                    @change="handleClickPlat"
                                >
                                    <template #default>
                                        <!-- +shopCategory -->

                                        <view class="formitem__detail--text">
                                            <text>{{ formData.limitType === 'UNLIMITED' ? '不限购' : '商品限购' }}</text>
                                            <icon-down></icon-down>
                                        </view>
                                    </template>
                                </uni-data-picker>
                            </view>
                        </u-form-item>
                        <u-form-item label="限购数量" :border-bottom="false" :label-style="labelStyle">
                            <view
                                class="formitem__detail"
                                :style="formData.limitType === 'UNLIMITED' ? { backgroundColor: '#F4F4F4' } : { backgroundColor: '#fff' }"
                            >
                                <u-input
                                    v-model.number="formData.limitNum"
                                    class="formitem__detail--text"
                                    type="text"
                                    placeholder="长度不超过30个字符"
                                    maxlength="30"
                                    :disabled="formData.limitType === 'UNLIMITED' ? true : false"
                                />
                            </view>
                        </u-form-item>
                        <u-form-item
                            v-if="formData.productType !== 'REAL_PRODUCT' && !formData.id"
                            label="库存类型"
                            :border-bottom="false"
                            :label-style="labelStyle"
                        >
                            <view class="formitem__detail">
                                <uni-data-picker
                                    v-model="formData.stockType"
                                    :localdata="stockTypeData"
                                    popup-title="库存类型"
                                    @change="handleClickPlat"
                                >
                                    <template #default>
                                        <view class="formitem__detail--text">
                                            <text>{{ formData.stockType === 'UNLIMITED' ? '不限库存' : '限制库存' }}</text>
                                            <icon-down></icon-down>
                                        </view>
                                    </template>
                                </uni-data-picker>
                            </view>
                        </u-form-item>
                        <u-form-item v-if="!formData.id" label="库存" :border-bottom="false" :label-style="labelStyle">
                            <view
                                class="formitem__detail"
                                :style="formData.stockType === 'UNLIMITED' ? { backgroundColor: '#F4F4F4' } : { backgroundColor: '#fff' }"
                            >
                                <u-input
                                    v-model.number="formData.initStock"
                                    class="formitem__detail--text"
                                    type="text"
                                    placeholder="0"
                                    maxlength="30"
                                    :disabled="formData.stockType === 'UNLIMITED' ? true : false"
                                />
                            </view>
                        </u-form-item>
                    </template>
                    <!-- 多规格 -->
                    <template v-else>
                        <u-form-item v-if="!formData.id" label="商品规格" :required="true" :border-bottom="false" :label-style="labelStyle">
                            <view class="formitem__selec" @click="handleGoToSpec">
                                <view>选择商品规格</view>
                                <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                            </view>
                        </u-form-item>
                        <u-form-item label="规格明细" :required="true" :border-bottom="false" :label-style="labelStyle">
                            <view class="formitem__selec" @click="handleGoToDetail">
                                <view>选择规格明细</view>
                                <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                            </view>
                        </u-form-item>
                    </template>
                    <view v-if="formData.productType !== 'VIRTUAL_PRODUCT'" class="formitem itemone">
                        <view class="formitem__title iconred">配送方式 </view>
                        <u-checkbox-group>
                            <template v-for="t in formData.distributionModeList" :key="t.value">
                                <u-checkbox
                                    v-model="t.checked"
                                    :disabled="disabled && t.value === 'INTRA_CITY_DISTRIBUTION'"
                                    :name="t.value"
                                    @change="checkboxChange"
                                >
                                    {{ t.label }}
                                </u-checkbox>
                            </template>
                        </u-checkbox-group>
                    </view>
                    <u-form-item
                        v-if="formData.distributionMode.includes('EXPRESS')"
                        label="运费模板"
                        :required="true"
                        :border-bottom="false"
                        :label-style="labelStyle"
                    >
                        <view class="formitem__selec">
                            <uni-data-picker
                                :localdata="logisticsTemplateList"
                                popup-title="商家包邮"
                                @nodeclick="handleClickLogistics"
                                @change="handleChanefreight"
                            >
                                <template #default>
                                    <!-- +shopCategory -->

                                    <template v-if="formData.freightText"> {{ formData.freightText }}</template>
                                    <template v-else>
                                        {{ '商家包邮' }}
                                    </template>
                                </template>
                            </uni-data-picker>
                        </view>
                    </u-form-item>

                    <view class="formitem itemone">
                        <view class="formitem__title"
                            >商品详情
                            <view class="formitem__icon" @click="handleGoToRichText">
                                <u-icon name="plus" size="30" color="#4755E9"></u-icon>
                            </view>
                        </view>
                    </view>
                </u-form>
            </scroll-view>
        </view>
        <view class="content__bottom">
            <view class="content__bottom--submit" @click="handleSubmit">
                <u-icon name="huidaodingbu" custom-prefix="icon" class="iconfont" size="65" color="#4755E9"></u-icon>
                提交
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
@include b(content) {
    height: 100vh;
    display: flex;
    flex-direction: column;
    @include e(header) {
        height: 200rpx;
        padding: 72rpx 0 0 0;
        // background-color: red;
        display: flex;
    }
    @include e(main) {
        height: 996rpx;
        border-radius: 50rpx 50rpx 0 0;
        background-color: rgba(252, 252, 252, 1);
        @include m(form) {
            height: 996rpx;
            box-sizing: border-box;
            padding: 40rpx 22rpx 0 34rpx;
            display: flex;
            flex-direction: column;
        }
    }
    @include e(bottom) {
        flex: 1;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        padding: 0 36rpx 0 42rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        @include m(submit) {
            width: 288rpx;
            height: 78rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20rpx;
            background-color: rgba(232, 234, 255, 1);
        }
    }
}
@include b(itemone) {
    margin-top: 40rpx;
}
@include b(formitem) {
    display: flex;
    flex-direction: column;
    // margin-bottom: 42rpx;
    @include e(icon) {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background-color: rgb(236, 237, 245);
        text-align: center;
        line-height: 50rpx;
        font-weight: bold;
    }
    @include e(title) {
        color: rgba(153, 153, 153, 1);
        font-size: 24rpx;
        // margin-bottom: 14rpx;
        display: flex;
        justify-content: space-between;
    }
    @include e(detail) {
        width: 694rpx;
        // height: 60rpx;
        border-radius: 16rpx;
        // color: rgba(204, 204, 204, 1);
        font-size: 24rpx;
        border: 2rpx solid rgba(204, 204, 204, 1);
        padding-left: 20rpx;
        @include m(text) {
            color: black;
            font-size: 24rpx;
        }
    }
    @include e(span) {
        margin-top: 18rpx;
        color: rgba(196, 196, 196, 1);
        font-size: 24rpx;
    }
    @include e(selec) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 694rpx;
        // height: 60rpx;
        border-radius: 16rpx;
        color: rgba(204, 204, 204, 1);
        font-size: 24rpx;
        border: 2rpx solid rgba(204, 204, 204, 1);
        padding: 0 20rpx;
    }
}
:deep(.u-form-item) {
    padding: 0;
}
:deep(.formitem__detail) {
    width: 694rpx;
    height: 60rpx;
    border-radius: 16rpx;

    font-size: 24rpx;
    border: 2rpx solid rgba(204, 204, 204, 1);
    padding-left: 20rpx;
}
:deep(.uni-input-wrapper) {
    line-height: 60rpx;
    height: 60rpx;
    color: rgba(204, 204, 204, 1);
    font-size: 24rpx;
}
:deep(.input-value-border) {
    border: none;
}
// 一个伪类 作用就是在label后面加一个红色必填项*号
:deep(.u-form-item--left__content--required) {
    left: 100rpx;
}
:deep(.uni-input-input) {
    color: #333;
}
@include b(iconred) {
    position: relative;
    &::after {
        position: absolute;
        left: 100rpx;
        content: '*';
        color: red;
        margin-left: 10rpx;
    }
}
</style>
